<template>
	<view>
		<view class="payed-status-container">
			<view class="payed-status-header">
				<!-- #ifdef MP-WEIXIN -->
				<!-- 微信小程序中不显示按钮 -->
				<!-- #endif -->

				<!-- #ifndef MP-WEIXIN -->
				<!-- 非微信小程序平台（包括iOS和Android）显示按钮 -->
				<view class="back-icon">
					<uni-icons type="left" size="25" @click="backAddressList()"></uni-icons>
				</view>
				<!-- #endif -->
				<view class="title">
					支付成功
				</view>

			</view>

			<view class="pay-moeny-content">
				<view class="img-box">
					<img class="pay-success" src="/static/order-detail/green-pay-success.png" alt="" />
				</view>
				<view class="pay-text">订单支付成功</view>
				<view class="pay-money">
					订单金额：￥{{orderDetailData.allData.orderData.totalPrice}}
				</view>
				<view class="btn red-bg" @click="toOrderDetail">
					查看订单
				</view>
				<view class="btn white-bg" @click="toIndex">
					返回首页
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		watch,
		watchEffect,
		onUnmounted,
		inject
	} from 'vue';
import { onShow, onHide, onUnload, onLoad } from '@dcloudio/uni-app';
import { updateState,sharedState } from '@/common/store.js';
	let orderDetailData = ref(null);
	let orderId = ref(0);
	const toIndex =()=>{
		uni.switchTab({
			url:"/pages/index/index"
		})
	}
	onMounted(() => {

		uni.getStorage({
			key: 'toOrderDetail',
			success: function(res) {
				console.log('获取支付跳转订单详情数据:', res.data);

				orderDetailData.value = res.data;
				console.log(orderDetailData.value);
				// const selectedItem = orderStatusList.value.find(item => item.statusCode ===
				// 	currentStatusCode.value);
			},
			fail: function(err) {
				console.error('获取数据失败', err);
			}
		});
	})
	
	const toOrderDetail = ()=>{
	console.log(orderDetailData.value.allData.orderData.getDistributionType);
		if(orderDetailData.value.allData.orderData.getDistributionType == "快递配送"){
				updateState(4);
			orderDetailData.value.setOrderStatus = 4;
			uni.setStorage({
				key: 'payToDetailData',
				data: orderDetailData.value,
				success: function() {
					console.log('数据存储成功');
					uni.redirectTo({
						url: "/pages/orderdetail/orderdetail"
					})
				},
				fail: function(err) {
					console.error('数据存储失败', err);
				}
			});
		}else if(orderDetailData.value.allData.orderData.getDistributionType == "自助取票"){
			orderDetailData.value.setOrderStatus = 3;
			updateState(3);
			uni.setStorage({
				key: 'payToDetailData',
				data: orderDetailData.value,
				success: function() {
					console.log('数据存储成功');
					uni.redirectTo({
						url: "/pages/orderdetail/orderdetail?"
					})
				},
				fail: function(err) {
					console.error('数据存储失败', err);
				}
			});
		}
	}
</script>

<style lang="scss" scoped>
	.payed-status-container {
		width: 100%;
		min-height: 100vh;
		height: auto;
		display: block;
		background: #f8f8fe;
		color: #333;

		.payed-status-header {
			float: left;
			width: 100%;
			height: 50px;
			display: flex;
			background: #fff;
			box-sizing: border-box;
			text-align: center;
			justify-content: center;
			align-items: center;
			box-shadow: 0px 0px 4px 0px #d3d3d3;

			.title {
				position: absolute;
				line-height: 50px;
				font-size: 18px;
				z-index: 5;
				height: 50px;
			}

			.back-icon {
				z-index: 10;
				position: absolute;
				left: 10px;
			}
		}

		.pay-moeny-content {
			width: 100%;
			height: auto;
			float: left;
			margin-top: 2px;
			background: #fff;

			.img-box {
				width: 100%;
				height: 150px;
				display: flex;
				justify-content: center;
				float: left;


				.pay-success {
					margin-top: 90px;
					width: 56px;
					height: 56px;
				}


			}

			.pay-text {
				float: left;
				width: 100%;
				height: 40px;
				line-height: 50px;
				text-align: center;
				font-size: 18px;
			}
			
			.pay-money {
				float: left;
				width: 100%;
				height: 30px;
				line-height: 30px;
				text-align: center;
				font-size: 14px;
				margin-bottom: 15px;
			}
			
			.btn{
				width: calc(100% - 40px);
				margin: 0px 20px;
				height: 45px;
				text-align: center;
				line-height: 45px;
				border: 1px solid #ff2d2de2;
				border-radius: 4px;
				font-size: 14px;
				float: left;
				margin-bottom: 15px;
			}
			
			.red-bg {
				background: #ff2d2de2;
				color: #fff;
			}
			
			.white-bg {
				background: #fff;
				color: #ff2d2de2;
			}
		}
	}
</style>